<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <Asider :collapsed="collapsed" />
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="setcollapsed"
        />
      </a-layout-header>

      <a-layout-content
        :style="{ margin: '5px 0', background: '#fff' }"
      >
        <a-layout :style="{ height: '100%' }">
          <a-layout-header  :style="{padding:0, height: '100%' ,background: '#fff',height:'40px'}" v-if="showTabs">
              <!-- tabs -->
          </a-layout-header>
          <a-layout-content
            :style="{
              margin: '5px 0 ',
              padding: '12px 10px',
              overflow:'auto'
            }"
          >
                <router-view/>

          </a-layout-content>
        </a-layout>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import {mapState,mapMutations} from "vuex";
import Asider from "./components/Asider";


export default {
    components: {
    Asider
  },
  data() {
    return {
      collapsed: false,
    };
  },
  computed: {
         ...mapState({
      showTabs: state => state.showTabs
    }),
   
  },
  methods:{
    ...mapMutations(['setopenKeys','setdefaultSelectedKeys']),

    setcollapsed(){
        this.collapsed = !this.collapsed;
        if(!this.collapsed){
          this.setopenKeys([])
        }else{
            var data = {
            openKeys: this.$route.meta && this.$route.meta.pname,
            defaultSelectedKeys: this.$route.name,
          };
        this.$store.commit("setSelectedKeys", data);
        }
    },
  },

};
</script>
<style lang="less" scoped >
@import "./Main.less";
</style>

